<template>
  <div class="dashboard-container">
    <div class="app-container">

      <screen :data-list="AttendancesList" @changeData="changeData" />
      <!-- 放置表格和分页 -->
      <el-card>
        <el-table border :data="pageList">
          <el-table-column label="序号" type="index" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column
            v-for="(day,index) in dayList"
            :key="day"
            :label="day"
          >
            <!-- 插槽显示数据 -->
            <template #default="{row}">
              {{ row.attendanceRecord[index].adtStatu | filterData }}
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <!-- :page-size="page.size" :total="page.total" @current-change="currentChange"  -->
          <el-pagination layout="prev, pager, next" :page-size="page.size" :total="AttendancesList.length" @current-change="currentChange" />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
// 引入筛选组件
import screen from './components/screen.vue'
// 模拟数据
import { getAttendancesListMock } from '@/api/attendances'
// 枚举数据
import attendanceData from '@/api/constant/attendance'

export default {
  components: { screen },
  // 过滤显示枚举
  filters: {
    filterData(oldVal) {
      // 用数字转换中文
      const obj = attendanceData.holidayType.find(item => Number(item.id) === Number(oldVal))
      return obj ? obj.value : ''
    }
  },
  data() {
    return {
      // 原列表
      AttendancesList: [],
      // 过滤后
      filteredList: [],
      page: {
        page: 1, // 页码
        pagesize: 10 // 页码条
      }
    }
  },
  computed: {
    // 显示相应的页面
    pageList() {
      // 结束
      const end = this.page.page * this.page.pagesize
      // 开始
      const start = end - this.page.pagesize
      // 从数组开始到结束之间显示
      return this.filteredList.slice(start, end)
    },
    // 时间处理
    dayList() {
      // 当有数据的时候, 拿出第一行的记录, 用里面的日期生成日期列
      const list = this.AttendancesList[0] ? this.AttendancesList[0].attendanceRecord : []
      return list.map(el => {
        // 拿到day从时间4-6之间获取  月
        const month = el.day.toString().substring(4, 6)
        // 拿到day从时间6后所有   日
        const day = el.day.toString().substring(6)
        return `${month}/${day}`
      })
    }
  },
  async created() {
    this.getAttendancesListMock()
  },
  methods: {
    async getAttendancesListMock() {
      this.AttendancesList = await getAttendancesListMock()
      this.filteredList = [...this.AttendancesList]
      console.log(this.AttendancesList)
      console.log('过滤后的', this.filteredList)
    },
    // 点击却换页面
    currentChange(newPage) {
      this.page = {
        ...this.page,
        page: newPage
      }
    },
    changeData(newData) {
      this.filteredList = [...newData]
    }
  }
}
</script>

<style>

</style>
